<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" id="aid">
    <head>
        <meta charset="utf-8">
        <title>菜单管理</title>
        <link rel="stylesheet" href="css/layui.css" media="all">
        <link rel="stylesheet" type="text/css" href="css/common.css"/>
        <link rel="stylesheet" type="text/css" href="zTree/zTreeStyle/zTreeStyle.css"/>
    </head>
    <body class="inner-body layui-row layui-col-space10" style="background:#f2f2f2;position: relative; ">

        <!-------默认表格开始----------->
        <div class="body-right">
            <div class="tableHtml" style="height: 100%;background: #FFFFFF; min-width: 800px;">
                <div class="top-btn">
                    <div class="layui-btn-group">
                        <button class="layui-btn" id="addBtn">新建菜单</button>
                        <button class="layui-btn" id="editBtn">编辑菜单</button>
                        <button class="layui-btn" id="lookBtn">查看菜单</button>
                        <button class="layui-btn" id="delBtn">删除菜单</button>
                    </div>
                    <div class="search-btn-group layui-form">
                        <input type="text" autocomplete="off"  id="keyword"  maxlength="20" class="layui-input layui-input_" placeholder="请输入区域名称">
                        <button class="layui-btn layui-btns" id="queryBtn">查询</button>
                    </div>
                </div>
                <div class="tableDiv">
                    <table id="areaTable" lay-filter="tableBox" class="layui-table"></table>
                </div>
            </div>
        </div>
        <!-----------------默认表格结束------------>

    </body>


    <script src='layui.all.js'></script>
    <script src="js/common.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="zTree/jquery.ztree.all.js" type="text/javascript"></script>
    <script src="zTree/jquery.ztree.exhide-3.5.min.js" type="text/javascript"></script>
    <script src="zTree/MtrSearchZTree.js" type="text/javascript"></script>
    <script src="js/ztreecommon.js" type="text/javascript"></script>
    <script type="text/html" id="statusName">
        {{#  if(d.status ==0 ){ }}
        <span style="color: #43a047">启用</span>
        {{#  } else if(d.status ==1) { }}
        <span style="color: #ff5d5d">禁用</span>
        {{#  } }}
    </script>
    <script type="text/javascript">
        //主动加载jquery模块
        layui.use(['jquery', 'layer'], function(){
            var $ = layui.jquery, //重点处
                layer = layui.layer;
            table = layui.table;//表格，注意此处table必须是全局变量
            var arr = [
                [
                    {type: 'radio'}
                    , {field: 'menuName', title: '菜单名称'}
                    , {field: 'menuUrl', title: '菜单地址'}
                    , {field: 'createTime', title: '创建时间' }
                    , {field: 'updateTime', title: '更新时间'}
                ]
            ];
            var limitArr =[15,30,45];
            var urls = '/queryList';

            var done = function(res, curr, count){//res 接口返回的信息

            }
            com.tableRender('#areaTable','areaTable','full-53',limitArr,urls,arr,null,true,done);//加载表格,注意tableId是自定义的，在表格重载需要！！

        })
    </script>
</html>